<template>
  <div class="admin-home" data-v-adminhome>
    <div class="menu">
      <h2>历史通知</h2>
      <el-button
        class="btn"
        type="primary"
        icon="el-icon-add"
        @click="dialogVisible = true"
        >新增</el-button
      >
    </div>
    <div class="content">
      <el-timeline class="timeline">
        <el-timeline-item
          class="timeline-item"
          placement="top"
          v-for="item in noticeList"
          :key="item.id"
          :timestamp="item.date"
        >
          <el-card
            class="card"
            v-for="childrenItem in item.children"
            :key="childrenItem.id"
          >
            <div class="card-inner">
              <h2 :data-noticedate="childrenItem.date">
                {{ childrenItem.title }}
              </h2>
              <p>{{ childrenItem.content }}</p>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <el-dialog
      title="发送通知"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <el-form label-position="top" label-width="60px" :model="notice">
        <el-form-item>
          <el-input v-model="notice.title">
            <template slot="prepend">主题：</template></el-input
          >
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            resize="none"
            :autosize="{ minRows: 6, maxRows: 6 }"
            v-model="notice.content"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sendNotice">发送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AdminHome",
  data: function () {
    return {
      noticeList: [],

      dialogVisible: false,
      notice: {
        title: "",
        content: "",
      },
    };
  },

  created() {
    this.getNoticeList();
  },

  mounted() {
    // this.connect();
  },

  methods: {
    // 获取历史通知
    getNoticeList() {
      this.axios
        .get(`/admin/notice`)
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.noticeList = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 发送通知
    sendNotice() {
      if (!this.notice.title || !this.notice.content) {
        return this.$message({
          message: "主题和内容不能为空",
          type: "warning",
        });
      }

      this.$socket.emit("sendNotice", this.notice);

      // console.log(this.notice);
      this.axios
        .post(`/admin/sendNotice`, {
          notice: this.notice,
        })
        .then((response) => {
          if (response.data.status == 200) {
            // console.log(response);
            this.dialogVisible = false;

            this.notice = {
              title: "",
              content: "",
            };
            this.getNoticeList();
            // this.noticeList = response.data.data;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  sockets: {
    //客户端接收后台传输的socket事件
    // getNotice: function (data) {
    //   // console.log(data);
    // },
  },
};
</script>

<style lang="scss" scoped>
.admin-home[data-v-adminhome] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 18px;

  .menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 0 10px;
    background-color: #e3e3e3;

    h2 {
      font-size: 20px;
      font-weight: 500;
    }

    .btn {
      font-size: 18px;
    }
  }

  .content {
    width: 100%;
    max-height: 720px;
    flex: 1;
    margin-top: 20px;
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    .timeline-item {
      .card {
        margin-bottom: 8px;

        .card-inner {
          display: flex;
          flex-direction: column;
          width: 100%;
          min-height: 100px;

          h2 {
            padding: 5px 0;
            font-size: 18px;
            font-weight: 700;
          }

          h2::after {
            content: attr(data-noticedate);
            font-size: 16px;
            color: #ada7a7;
          }

          p {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>